<template>
    <div class="container">
        <div class="content"
            @pointerleave="handlePointLeave"
            @pointerenter="handlePointEnter">
            <div class="options">
                <div class="item" :class="{active: index === (Math.abs(active % 5))}" v-for="(item, index) in 5" :key="item">{{item}}</div>
            </div>
            <div class="slider">
                <div @click="leftClick"><ArrowLeft style="width: 20px" /></div>
                <div @click="rightClick"><ArrowRight style="width: 20px" /></div>
            </div>
        </div>
        <div class="action">action</div>
    </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { reactive, toRefs } from '@vue/reactivity';
import gsap from 'gsap';

const data = reactive({
    active: 0
})
const { active } = toRefs(data)

function leftClick(){
    console.log("@@@", );
    active.value--
}

function rightClick(){
    console.log("@@@", active.value % 5);
    active.value++
}

function handlePointEnter(){
    console.log("enter \n");
    gsap.fromTo(".slider", {
        opacity: 0,
        duration: 0.5
    }, {
        paddingLeft: 30,
        paddingRight: 30,
        opacity: 1,
        duration: 0.5
    })
}

function handlePointLeave(){
    console.log("leave \n");
    gsap.fromTo(".slider", {
        opacity: 1,
        duration: 0.5
    }, {
        paddingLeft: 0,
        paddingRight: 0,
        opacity: 0,
        duration: 0.5
    })
}

</script>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    font-family: "Josefin Sans Bold";

    .content{
        width: 100%;
        height: 100%;
        position: relative;

        .options{
            display: flex;
            height: 100%;
            // align-items: center;
            justify-content: center;
            padding-top: 40px;

            .item{
                width: 20px;
                height: 360px;
                border-radius: 12px;
                padding: 20px;
                background-color: #333;
                transition: all .3s;
                
                &~.item{
                    margin-left: 20px;
                }
            }

            .active{
                width: 400px;
            }
        }

        .slider{
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            top: 40%;
            transform: translateY(-50%);
            box-sizing: border-box;
            opacity: 0;
            padding: 0;
            pointer-events: none;
            z-index: 999;

            div{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                border: 1px solid var(--color-primary-border);
                transition: .3s all;
                pointer-events: all;

                &:hover{
                    background-color: var(--color-primary-border-light);
                }

            }
        }
    }
}
</style>